<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'费用支出',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft" @click="show=true">筛选</view>
			</view>
		</header-top>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="" style="padding-bottom: 120rpx;">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="jumpdetail(item.id,84)">
					<view class="flexbetween">
						<view class="flexleft">
							<view class="nostrongtext margin_right">{{item.pjdh}}</view>
						</view>
						<view class="shlables radius" v-show="item.status==10">待审核</view>
						<view class="shlable radius" v-show="item.status==20">审核通过</view>
						<view class="hlable radius" v-show="item.status==30">已作废</view>
						<view class="hlable radius" v-show="item.status==40">已拒绝</view>
					</view>
					<view class="margin_top xiaohui flexbetween">
						<view class="flexleft" @click="phone(item.staff.mobile)">
							<view class="">申请人：{{item.staff.username}}</view>
							<view class="littleblue"></view>
						</view>
					</view>
					<view class="margin_top xiaohui flexbetween" v-if="item.applystaff">
						<view class="flexleft" @click="phone(item.applystaff.mobile)">
							<view class="">审批人：{{item.applystaff.username}}</view>
							<view class="dizhiimg"></view>
						</view>
					</view>
					<view class="margin_top xiaohui flexbetween">
						<view class="">费用类型：{{item.fyhttype.name}}</view>
						<view class="flexright">金额：<text class="xiaolan">{{item.price}}</text></view>
					</view>
					<view class="margin_top xiaohui">费用时间：{{item.fy_time_text}}</view>
					<view class="margin_top xiaohui">备注：{{item.notes}}</view>
					<view class="flexleft margin_top">
						<view class="select-box flexcolumn" v-for="(ite,inde) in item.images_text" :key="inde" @click="lbtpriview(inde,item.images_text)">
							<view class="upimageicon">
								<image :src="ite" mode=""></image>
							</view>
						</view>
					</view>
					<view class="flexright margin_top2" v-if="item.is_apply==1">
						<view class="xiaolankuang flexbetween margin_left2" v-if="item.status==10"
							@click.stop="examine(item.id)">
							<u-icon name="android-fill" color="#0BBDCB" size="16"></u-icon>
							<view class="xiaolan margin_left1">审核</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="posibottom">
				<view class="onebox flexcenter flex_wrap">
					<view class="huangse">共{{dataAll.total_num}}笔，金额{{dataAll.total_price}}元</view>
					<view class="huangse"></view>
				</view>
			</view>
		</view>
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="strongtext margin_top">状态</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in statuslist" :key="item.id"
						@click="changestatus(item.id)">
						<view :class="currentstatus == item.id?'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top" @click="FyzclxShow=true">
					<input type="text" placeholder="选择费用类型" disabled="true" v-model="staff_fyht_type_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<input type="text" placeholder="选择申请人" disabled="true" v-model="staff_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="init">确认</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			 @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" @close="showss=false"></u-datetime-picker>
			<selectFyzclx :message="{FyzclxShow:FyzclxShow}" @FyzclxSure="FyzclxSure"></selectFyzclx><!-- 费用支出类型 -->
		<u-modal :show="examineShow" title="审核" @confirm="examineConfirm" showCancelButton @cancel="examineShow=false">
			<view class="slot-content">
				<view class="mainpadding_top">
					<u-radio-group v-model="examineType" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="审核通过" name="20"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="作废" name="30"></u-radio>
						<u-radio activeColor="#0BBDCB" label="拒绝" name="40"></u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 筛选开始
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				// 审核
				statuslist: [
					{
						id: 10,
						name: '待审核'
					},
					{
						id: 20,
						name: '审核通过'
					},
					{
						id: 30,
						name: '已作废'
					},
					{
						id: 40,
						name: '已拒绝'
					},
				],
				// 员工档案
				yuangongShow: false,
				yuangong: {
					id: "",
					name: ""
				},
				show: false, //筛选弹出层
				// 时间筛选
				currents: -1,
				currentstatus: 0,
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				// 筛选结束
				FyzclxShow:false,
				staff_fyht_type_id:"",
				staff_fyht_type_name:"",
				page: 1,
				limit: 12,
				list: {
					data: [],
				},
				// 审核
				examineType:"20",
				examineShow:false,
				examineId:"",
				pageShow:false,
				dataAll:{},
				staff_id:"",
				staff_name:"",
			}
		},
		onLoad(options) {
			if(options.type){
				this.currentstatus = options.type
			}
			this.init()
		},
		onShow() {
			let that = this
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				that.staff_id = data.id
				that.staff_name = data.name
				return false
			})
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			jumpdetail(id,qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url:"/pages/workbench/caiwu/feiyongzcxq?id="+id
				})
			},
			lbtpriview(index,arr) {
							var i = arr; //获取当前页面的轮播图数据
							//uniapp预览轮播图
							uni.previewImage({
								current: index, //预览图片的下标
								urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
							})
						},
			examine(id) {
				this.examineId = id
				this.examineShow = true
			},
			examineConfirm(){
				if(this.examineType==20){//通过
					if (!httpRequest.qxpd(82, this.$store.state.userInfo.ability_rule_ids)) {
						return false
					}
				}else if(this.examineType==30){//作废
					if (!httpRequest.qxpd(81, this.$store.state.userInfo.ability_rule_ids)) {
						return false
					}
				} else if(this.examineType==40){//拒绝
					if (!httpRequest.qxpd(83, this.$store.state.userInfo.ability_rule_ids)) {
						return false
					}
				}
				this.examineShow = false
				httpRequest.request('/dhtapi/user/applyFyht', 'GET', {
					id: this.examineId,
					status: this.examineType
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.init()
					}
				})
			},
			init(isPage, page) {
				this.show = false
				let _this = this;
				httpRequest.request('/dhtapi/user/fyhtIndex', 'POST', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					staff_fyht_type_id:this.staff_fyht_type_id,
					staff_id:this.staff_id,
					status:this.currentstatus
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changestatus(index) {
				this.currentstatus = index;
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 费用支出类型
			FyzclxSure(e){
				this.FyzclxShow = false
				if(e){
					this.staff_fyht_type_id = e.value[0].id
					this.staff_fyht_type_name = e.value[0].name
				}
				
			},
			// 筛选开始
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
			
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 重置
			resetbtn() {
				this.currentstatus = 0
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.staff_fyht_type_id = ""
				this.staff_fyht_type_name = ""
				this.staff_id = ""
				this.staff_name = ""
				this.init()
				this.show = false
			},
			// 筛选结束
		}
	}
</script>

<style lang="scss" scoped>
	// 筛选样式开始
	.inputscreenbox {
		width: 40%;
	
		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}
	
	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}
	
	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}
	.screenbox {
		width: 33.33%;
	}
	.huangse {
		font-size: 24rpx;
		text-align: center;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #F3AD3D;
	}
	.onebox {
		margin: 0 30rpx;
		padding: 14rpx 0;
		background: #fef7eb;
		border-radius: 16rpx;
	}
	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}
	
	.surebtn {
		width: 45%;
		border: #27b366 1rpx solid;
	}
	
	.reset {
		background: #fff;
		color: #27b366;
		border: #27b366 1rpx solid;
	}
	
	
	.minwidth {
		min-width: 130rpx;
	}
	
	.rightscreen {
		width: 100%;
	}
	
	.itemscreens {
		padding-bottom: 20rpx;
	}
	// 筛选样式结束
	.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}
	
	.shlables {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: rgba(243, 173, 61, .1);
	}
	.hlable{
			padding: 6rpx 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ff0000;
			line-height: 28rpx;
			background-color: rgba(255, 0, 0,.1);
		
	}
// 图片选择开始
	.select-box {
		width: 25%;
	}
	.upimageicon {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}
	
	.shanchu {
		width: 31rpx !important;
		height: 30rpx !important;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}
	
	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
	.posibottom{
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;
	}
	// 图片选择结束
</style>
